<div class="on-base-background">
    <h2 class="margin-bottom-xs margin-top-xs">
        <strong class="margin-right">2.</strong> Security Level
    </h2>
    <p class="margin-top-xs margin-bottom">
        Select the security option that best addresses your needs.
    </p>
</div>
<div class="row flex-row security">
    <div class="col-sm-8 flex-vertical">
        <div class="panel flex-vertical flex-grow margin-none">
            <div class="padding-md flex-grow">
                <h2 class="text-center margin-bottom margin-lg text-success">SECURE</h2>
                <div class="row">
                    <div class="col-sm-6" data-bind="attr: { 'data-original-title': model.disableLetsEncrypt() ? 'Not available on Mac OS' : '' }">
                        <div class="has-disable-reason">
                            <button class="btn btn-icon btn-default" title="Generate a Let's Encrypt certificate"
                                    data-bind="click: clickGenerate, enable: !model.disableLetsEncrypt(), css: { 'btn-selected-success' : model.mode() === 'LetsEncrypt' }">
                                <i class="icon-lets-encrypt icon-xl"></i>
                                <p class="lead">Generate Let's Encrypt Certificate</p>
                            </button>
                        </div>
                        <div class="padding">
                            <ul class="list">
                                <li><i class="icon-plus"></i><span>Secured communication via TLS</span></li>
                                <li><i class="icon-plus"></i><span>Authentication via X509 client certificates</span></li>
                                <li><i class="icon-plus"></i><span>Automatic certificate generation and renewal</span></li>
                                <li><i class="icon-plus"></i><span>Hassle free and automatic</span></li>
                                <li><i class="icon-minus"></i><span>Requires access to the public Internet</span></li>
                            </ul>
                            <div class="small">
                                Secure and easy to setup. Uses an automatically generated server certificate via Let's Encrypt. 
                                Reduce administration overhead with easy deployment both inside your organization and on publicly facing databases by handling all the certificate generation for you.
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <button class="btn btn-icon btn-default" title="Provide your own certificate"
                                data-bind="click: clickSecured, css: { 'btn-selected-success' : model.mode() === 'Secured' }">
                            <i class="icon-certificate icon-xl"></i>
                            <p class="lead">Provide Your Own Certificate</p>
                        </button>
                        <div class="padding">
                            <ul class="list">
                                <li><i class="icon-plus"></i><span>Secured communication via TLS</span></li>
                                <li><i class="icon-plus"></i><span>Authentication via X509 client certificates</span></li>
                                <li><i class="icon-plus"></i><span>Does not require access to the public Internet</span></li>
                                <li><i class="icon-minus"></i><span>Manual certificate generation and renewal</span></li>
                            </ul>
                            <div class="small">
                                Best to use with corporate configurations with existing PKI infrastructure or for those choosing to control
                                their certificate's creation on their own. Can be used in secured setups without external access required.
                                Administrator takes care of the server certificates generation and renewal.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4 flex-vertical">
        <div class="panel flex-vertical flex-grow margin-none">
            <div class="padding-md flex-grow">
                <h2 class="text-center margin-bottom margin-lg text-warning">UNSECURE</h2>
                <button class="btn btn-icon btn-default" title="Setup an Unsecure server"
                        data-bind="click: clickUnsecured, css: { 'btn-selected-warning' : model.mode() === 'Unsecured' }">
                    <i class="icon-unsecure icon-xl"></i>
                    <p class="lead">Unsecure</p>
                </button>
                <div class="padding">
                    <ul class="list">
                        <li><i class="icon-plus"></i><span>Ready to use in no time</span></li>
                        <li><i class="icon-minus"></i><span>Unsecured, running on http</span></li>
                        <li><i class="icon-minus"></i><span>No authentication</span></li>
                        <li><i class="icon-minus"></i><span>Cannot host encrypted databases</span></li>
                    </ul>
                    <div class="small">
                        Useful for local development and environments without <i>any</i> requirements for security.
                        <i>Not</i> suitable for publicly facing servers and storing production data.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="panel padding margin-top">
    <div class="toggle margin-left margin-right">
        <input id="zipOnly" class="styled" type="checkbox" data-bind="checked: model.onlyCreateZipFile">
        <label for="zipOnly">
            Use this Setup Wizard only to create a package for external setup
        </label>
    </div>
    <div class="text-info bg-info padding padding-sm margin-top-sm margin-bottom-sm margin-left margin-right">
        <i class="icon-info margin-right-xs"></i>
        <span data-bind="text: model.setupPackageText"></span>
    </div>
</div>

<div class="bg-experimental padding flex-horizontal margin-top-sm">
    <div class="margin-right-xs">
        <i class="icon-experimental icon-lg"></i>
    </div>
    <div class="margin-left-xs">
        <div class="checkbox checkbox-primary">
            <input id="features" type="checkbox" data-bind="checked: model.useExperimentalFeatures">
            <label for="features">Enable the following experimental features:</label>
        </div>
        <ul class="margin-left">
            <li>PostgreSQL Integration</li>
        </ul>
    </div>
</div>
<div class="navigation margin-top margin-bottom flex-horizontal">
    <button type="button" class="btn btn-default" data-bind="click: back">
        <i class="icon-arrow-left"></i><span>Back</span>
    </button>
    <div class="flex-separator"></div>
    <button class="btn btn-primary" data-bind="click: goToNextView">
        <span>Next</span> <i class="icon-arrow-right"></i>
    </button>
</div>
